<template>
  <div class="main">
    <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :options="playerOptions"></video-player>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      playerOptions: {
        //视频url设置,直播流为例
        sources: [{
          src: 'http://192.168.103.161:5200/live/index.m3u8'//视频文件地址
          //type: 'application/x-mpegURL'//视频类型，这里可以不写，如果写一定要写对，否则会无法播放
        }],
        // 其他设置项
        notSupportedMessage: "此视频暂无法播放，请稍后再试",//提示信息
        autoplay: true,//是否自动播放
        controls: true//是否显示控制栏
       // poster: 'http://path/to/poster.jpg',//视频封面
      }
    }
  },
  mounted() {
    // 通过 ref 访问 videoPlayer 组件实例，播放
    this.$refs.videoPlayer.play()
  }
}
</script>

<style scoped>
 

.main {
  width: 100%;
  height: 100%;
}
 
</style>